<template>
    <infoView class="container-middle" :loading="userLoading" :userInfo="userInfo" :myInfo="useMyInfo"></infoView>
    <stickWrap
        :top="53"
        class="tabs-wrap"
        :class="{'is-sticky': isSticky}"
        @stickyChange="stickyChange">
        <div class="container-middle tabs-layout">
            <Avatar v-show="isSticky" :src="userInfo.avatarUrl" @click="avatarClick"></Avatar>
            <el-tabs v-model="activeName" class="profile-content" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabsOptions" :label="item.label" :name="item.name">
                </el-tab-pane>
            </el-tabs>
            <template v-if="isSticky">
                <el-button v-if="useMyInfo.id">编辑个人资料</el-button>
                <el-button v-else type="primary">关注</el-button>
            </template>
        </div>
    </stickWrap>
    <div class="tabs-page container-middle" ref="viewRef">
        <RouterView :name="activeName"></RouterView>
    </div>
</template>

<script lang="ts" setup>
import infoView from './info-view.vue'
import stickWrap from '@/components/common/sticky-wrap.vue'
import Avatar from '@/components/common/Avatar.vue'
import { ref, computed, onMounted, reactive, nextTick, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { getUserInfo } from '@/apis/user'
import { UserInfor } from '@/apis/user/types'
import useStore from '@/store'
const route = useRoute()
const router = useRouter()
const { user } = useStore()
const { useToken, useMyInfo } =  storeToRefs(user)

interface RouterParams {
    id: string
    pageValue: string
}

// 解构获取动态路由中的params参数
const routerParams = computed(() => route.params as unknown as RouterParams)
const { id, pageValue } = routerParams.value

// 获取用户信息
const userLoading = ref<boolean>(false)
let userInfo = reactive({}) as UserInfor
const useGetUserInfo = async () => {
    const res = await getUserInfo(id)
    userInfo = res.data
    userLoading.value = true
}

// 监听吸顶
const isSticky = ref<boolean>(false)
const stickyChange = (val:boolean) => {
    isSticky.value = val
}

// 判断是否登录以及是否存在个人信息，用来比较查询的是否为自己
onMounted(async () => {
    const info = useMyInfo.value
    if(!useToken.value) {
        await useGetUserInfo()
    } else {
        if(!info || !info.id) {
            await user.getMyInfo()
            await useGetUserInfo()
        } else {
            await useGetUserInfo()
        }
    }
})

// 子路由Tabs
const tabsOptions = [
    { label: '文章', name: 'article' },
    { label: '动态', name: 'dynamic' },
    { label: '收藏', name: 'collect' },
    { label: '关注', name: 'following' },
    { label: '粉丝', name: 'follow' }
]

// 根据路由id设置tabs的选中
const activeName = ref<string>(pageValue || 'article')
const handleClick = (tab: TabsPaneContext): void => {
    router.push({
        path: `/user/${id}/${tab.props.name}`
    })
}

// 吸顶时点击头像
const avatarClick = () => {
    
}
</script>

<style lang="less" scoped>
.tabs-wrap {
    margin-top: 15px;
    .tabs-layout {
        display: flex;
        align-items: center;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        .el-tabs {
            --el-tabs-header-height: 48px;
        }
    }
}
.is-sticky {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    .tabs-layout {
        border: 0;
    }
}
.profile-content {
    flex: 1;
    background-color: var(--color-white);
    :deep(.el-tabs__header) {
        margin: 0;
    }
    :deep(.el-tabs__nav-wrap) {
        padding: 0 15px;
        &:after {
            height: 0;
        }
    }
}
.tabs-page {
    padding: 0 15px 15px 15px;
    background-color: var(--color-white);
    min-height: 42px;
}
</style>
